<!--
*@Author: QWP
*@Description: 日期选择框
*@Date: 2023-06-18 16:26:39
-->
<template>
  <a-date-picker
    size="middle"
    :format="$attrs.format || 'YYYY-MM-DD'"
    :valueFormat="$attrs['valueFormat'] || 'YYYY-MM-DD'"
    :placeholder="$attrs.placeholder || '选择日期'"
    :disabled-date="$attrs['disabled-date'] || disabledDate"
    style="width: 100%;"
    v-bind="$attrs"
    v-if="refresh"
    class="u-common-date-picker">
  </a-date-picker>
</template>
<script>
import dayjs from 'dayjs'
export default {
  name: 'u-date-picker',
  props: {
    maxDate: {
      type: String, 
      default: ''
    },
    minDate: {
      type: String, 
      default: ''
    }
  },
  data () {
    return {
      dataValue: '',
      refresh: true,
    }
  },
  computed: {
    getValueFormat() {
      let valueFormat = this.$attrs['valueFormat'] ? this.$attrs['valueFormat'] : 'yyyy-MM-dd'
      return valueFormat
    }
  },
  mounted() {},
  methods: {
    // 设置日期禁用区间
    disabledDate(current) {
      if(this.maxDate && this.minDate) {
        return current && current > dayjs(this.maxDate).endof('day') && current && current < dayjs(this.minDate).endof('day')
      }
      else if(this.maxDate) {
        return current && current > dayjs(this.maxDate).endof('day')
      }
      else if(this.minDate) {
        return current && current < dayjs(this.minDate).endof('day')
      }
      this.refresh = false;
      this.$nextTick(() => this.refresh = true)
    }
  },
  watch: {
    maxDate: {
      handler: function(nval) {
        this.disabledDate()
      },
      immediate: true
    },
    minDate: {
      handler: function(nval) {
        this.disabledDate()
      },
      immediate: true
    },
  }
}
</script>

<style lang="scss">
.u-common-date-picker {
  input:disabled {
    background-color: #f2f3f5 !important;
    color: #333 !important;
  }
}
</style>